<template>
  <div v-if="model&&model.modelKey=='goodsListBox'" :key="model.modelKey" class="model_box goods_box">
    <div class="goods_box_inner" :style="`backgroundColor:${model.bgColor||''};${model.bgImage?('backgroundImage:url('+model.bgImage+');'):''}color:${model.txtColor||''}`">
      <div :style="`backgroundImage:url('${model.titleBgImage||''}');color:${model.titColor}`" class="top">
       
      </div>
      <div>
        <div class="gametab flex" v-if="gameList&&gameList.length">
          <div v-for="(item, index) in gameList" :style="index===0?`color:${model.activeColor||''};background:${model.activeBgcolor||''};border-color:${model.activeBgcolor||''}`:''" :key="index" class="gametab_item" :class="{active:index===0}">
            {{ item.name }}
          </div>
          <div class="allgame" :style="`backgroundColor:${model.bgColor};color:${model.allColor}`">
            全部
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="goods_list">
          <div class="goods_item" v-for="item in goodsList" :key="item.id">
            <img :src="item.img" alt="">
            <div class="des">
              {{ item.des }}
            </div>
            <div class="qufu_box flex fbt">
              <div class="qufu">{{ item.qufu }}</div>
              <div class="price_viewnum">
                <span>
                  {{ item.num }}
                </span>
                <span class="price">
                  {{ item.price }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <zhezhao @clickSet="clickItem('set')" :hidetxt="true"></zhezhao>
  </div>
</template>

<script>
import zhezhao from '../zhezhao.vue';
export default {
  components:{zhezhao},
  props: {
    model: {
      type: Object,
      default: () => ({}),
    },
    gameList: {
      type: Array,
      default: () => [],
    },
  },
  data(){
    return {
      goodsList:[
        {
          img:'https://pic.hswlkj.com/pictureApi/upload/2025/03/23/402888cb95bcd1ef0195c251bd203191.jpg',
          des:'实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品',
          qufu:'苹果微信',
          num:'999+人想要',
          price:'¥8888.00',
          id:1
        },
        {
          img:'https://pic.hswlkj.com/pictureApi/upload/2025/03/23/402888cb95bcd1ef0195c251bd203191.jpg',
          des:'实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品实例商品',
          qufu:'苹果QQ',
          num:'88 人想要',
          price:'¥666.00',
          id:2
        }
      ]
    }
  },
  methods: {
    clickItem(type) {
      this.$emit('clickItem', {type: type, modelKey: this.model.modelKey})
    }
  }
};
</script>
<style lang="scss" scoped>
.goods_box {
  padding: 0 !important;
  .goods_box_inner {
    background: #fff9f2;
    border-radius: 15px 15px 4px 4px;
    overflow: hidden;
    background-size: 100% auto;
    background-repeat: no-repeat;
    
    .top {
      width: 100%;
      height: 28px;
      line-height: 28px;
      background-size: 100% 100%;
      text-align: center;
      font-weight: bold;
    }
    .gametab {
      flex-wrap: nowrap;
      padding: 7px 10px;
      position: relative;
      .gametab_item {
        font-size: 12px;
        flex-shrink: 0;
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        border: 1px solid #d5d5d5;
        border-radius: 12px;
        margin-right: 10px;
        &.active {
          background: linear-gradient(179deg, #ffd28d 0%, #ffa132 100%);
          color: #fff;
          border: 1px solid #ffa132;
        }
      }
      .allgame {
        position: absolute;
        right: 0;
        background-color: #fff;
        height: 24px;
        padding: 2px 10px;
        color: #666;
      }
    }
    .goods_list {
      padding-bottom: 15px;
      .goods_item {
        width: 343px;
        // height: 269px;
        margin: 0 auto;
        margin-top: 5px;
        background: #ffffff;
        border-radius: 4px;
        padding: 8px;
        > img {
          width: 100%;
          height: 150px;
          border-radius: 4px;
        }
        .des {
          font-weight: 500;
          font-size: 14px;
          line-height: 20px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .qufu_box {
          margin: 5px 0;
          .qufu {
            color: #999999;
          }
          .price_viewnum {
            span {
              color: #999999;
              margin-right: 5px;
            }
            .price {
              font-weight: 600;
              font-size: 18px;
              color: #ff0000;
              line-height: 25px;
            }
          }
        }
      }
    }
  }
}
</style>